import React, { Component } from 'react'

import { Form, Select , Radio, Input, Button } from 'antd';

const RadioGroup = Radio.Group;
const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    xs: { span: 2 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
};

export default class Info extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.form.name ? this.props.form.name: '',
      sex: this.props.form.sex ? this.props.form.sex : 0,
      grade: this.props.form.stuGradeStr ? this.props.form.stuGradeStr: '一年级',
      email: this.props.form.email ? this.props.form.email: '',
    }
  }
  componentWillMount() {
    setTimeout(() => {
      let cH = document.getElementById('p_content').clientHeight
      let bH = document.body.clientHeight - 180
      let t = document.getElementById('footer')
      if(cH >= bH || bH<=800) {
        t.style.position= 'relative'
      }
    }, 300);
  }

  render() {
    return (
      <div>
        <Form {...formItemLayout}>
          <Form.Item label="姓名">
            <Input type="text" maxLength={9} value={this.state.name} onChange={(e)=> (this.setState({name: e.target.value}))}></Input>
          </Form.Item>
          <Form.Item label="性别">
            <RadioGroup onChange={(e)=> (this.setState({sex: e.target.value}))} value={this.state.sex}>
              <Radio value={0}>未填</Radio>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
            </RadioGroup>
          </Form.Item>
          <Form.Item label="邮箱">
            <Input placeholder="请输入邮箱"  value={this.state.email}  onChange={(e)=> (this.setState({email: e.target.value}))} />
          </Form.Item>
          <Form.Item label="年级">
            <Select defaultValue={this.state.grade} style={{ width: 120 }} onChange={(v, o) => (this.setState({grade: v}))}>
              <Option value="一年级">一年级</Option>
              <Option value="二年级">二年级</Option>
              <Option value="三年级">三年级</Option>
              <Option value="四年级">四年级</Option>
              <Option value="五年级">五年级</Option>
              <Option value="六年级">六年级</Option>
              <Option value="初一">初一</Option>
              <Option value="初二">初二</Option>
              <Option value="初三">初三</Option>
              <Option value="高一">高一</Option>
              <Option value="高二">高二</Option>
              <Option value="高三">高三</Option>
            </Select>
          </Form.Item>
        </Form>
        <Button style={{marginLeft: '24px'}} type="primary" onClick={this.props.saveInfo(this.state)}>保存</Button>
      </div>
    )
  }
}

